<template>
  <div class="loading-demo">
    <h3 class="title">基本</h3>
    <div>
      <p v-height="40">
        <d-switch v-model="loading">change loading</d-switch>
      </p>
      <div>
        <div style="padding: 100px 0;" v-bg-color:gray4 class="text-center">
          content
        </div>
        <d-loading text="Loading" :loading="loading"></d-loading>
      </div>
    </div>
    <h3 class="title">全局加载效果</h3>
    <div>
      <p>
        <d-button @click="pageload">Vue 调用全局加载</d-button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'loadingDemo',
  data () {
    return {
      loading: false
    }
  },
  methods: {
    pageload () {
      this.$Loading('加载中')
      setTimeout(() => {
        this.$Loading.close()
      }, 3000)
    }
  }
}
</script>

<style lang="stylus" scoped>
// .loading-demo
</style>
